import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'Cars.dart';

class MyView1 extends StatefulWidget{



  @override
  State<StatefulWidget> createState() {
    return MyView1State();
  }

}

class MyView1State extends State<MyView1> with TickerProviderStateMixin{
    //data[]--> map().toList() -->Container[]
    final List<Cars> cars = [
      Cars('BWM','',1,1,1,'https://s11.ax1x.com/2024/02/21/pFtokWR.jpg'),
      Cars('Benz','',1,1,1,'https://s11.ax1x.com/2024/02/21/pFtoFY9.jpg'),
      Cars('Das Auto','',1,1,1,'https://s11.ax1x.com/2024/02/21/pFtoFY9.jpg'),
      Cars('Wu Ling','',1,1,1,'https://s11.ax1x.com/2024/02/21/pFtoFY9.jpg'),
    ];

    final data = <Color>[
      Colors.purple.shade50,
      Colors.purple.shade100,
      Colors.purple[200]!,
      Colors.purple[300]!,
      Colors.purple[400]!,
      Colors.purple[500]!,
      Colors.purple[600]!,
      Colors.purple[700]!,
      Colors.purple[800]!,
      Colors.purple[900]!,
    ];

    late TabController _tabController;

    @override
  void initState() {
      _tabController = TabController(length: 4, vsync: this);
  }

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Container(
          width: double.infinity,
          height: 400.0,
          child: Column(
            children: [
              Row(
                children: [
                  SizedBox(
                    width: 400.0,
                    height: 100.0,
                    child: TabBar(
                      controller: _tabController,
                      tabs: [
                        Tab(text: 'EXPLORE1',icon: Icon(Icons.abc)),
                        Tab(text: 'EXPLORE2',icon: Icon(Icons.abc)),
                        Tab(text: 'EXPLORE3',icon: Icon(Icons.abc)),
                        Tab(text: 'EXPLORE4',icon: Icon(Icons.abc)),
                      ],
                    ),
                  )
                ],
              ),
              Row(
                children: [
                  SizedBox(
                    width: 411,
                    height: 300,
                    child: TabBarView(
                        controller: _tabController,
                        children: [
                          Tab(
                            child: ListView(
                              // itemExtent: 100.0,
                              scrollDirection: Axis.horizontal,
                              children: cars.map(
                                      (car) =>
                                      Card(
                                        child: Container(
                                          alignment: Alignment.center,
                                          width: 400.0,
                                          height: 400.0,
                                          child:Column(
                                            children: [
                                              Row(
                                                children: [
                                                  InkWell(
                                                    child: Text(car.title,style: const TextStyle(fontSize: 40.0),),
                                                    onTap: (){
                                                      print('onTap');
                                                    },
                                                  )
                                                ],
                                              ),
                                              Row(
                                                children: [
                                                  SizedBox(
                                                    width: 300.0,
                                                    height: 300.0,
                                                    child: Image.network(car.pic,),
                                                  )
                                                ],
                                              )
                                            ],
                                          ),
                                        ),
                                      )
                              ).toList(),
                            ),
                          ),
                          Tab(text:'CARS',icon:Icon(Icons.directions_transit)),
                          Tab(text:'TRUCKS',icon:Icon(Icons.directions_bike)),
                          Tab(text:'HELICOPTER',icon:Icon(Icons.directions_bike)),
                        ]),
                  )
                ],
              )
            ],
          ),
        ),
      );
    }

}